<!--  -->
<template>
	<view class="sys_case">
		<view class="noneping" v-if="list.length == 0">
			<image src="@/static/ics/bg1.png" mode=""></image>
			<view class="">暂无数据~</view>
		</view>
		<view v-else class="list-box">
			<!--  -->
			<view class="views" v-for="(itms,index) in list" :key="index">
				<view class="listM3">
					<image class="imas" src="@/static/icons/q2.png" mode="">
						<view class="">
							<text v-if="itms.caseRemark == 1">案例</text>
							<text v-else>病例</text>
							ID {{itms.caseCode6}}
						</view>
						<view class="" @click="goDetail(itms,index)">查看更多<image class="image"
								src="@/static/icons/aa15.png" mode=""></image>
						</view>
				</view>
				<view class="BgM4">
					<view @click="getDas(itms,i)" class="listM4" v-for="(i,d) in itms.treatListMap" :key="d">
						<view class="M4List">
							<view class="">治疗记录ID {{i.treat_code8}}</view>
							<view class="">{{i.treat_createtime}}</view>
						</view>
						<image class="m1" src="@/static/icons/aa14.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		gecaseList
	} from '@/api/pagesApi/index.js'
	// 图片服务器
	import baseURLShowImgUP from "@/api/base.js";
	export default {
		data() {
			return {
				list: [],
				form: {
					total: 0, //总页数
					pageSize: 100, //每页条数
					pageNum: 1, //默认当前页
				},
			}
		},
		onShow() {
			this.list = []
			this.getList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.form.pageNum = 1
			this.list = []
			this.getList()
			uni.stopPullDownRefresh(); //停止刷新
		},
		// onReachBottom() {
		// 	console.log('上拉');
		// 	this.getList()
		// },
		methods: {
			getList() {
				gecaseList(this.form).then(res => {
					console.log(res)
					// this.form.pageNum = this.form.pageNum + 1
					this.list.push.apply(this.list, res.data.rows);
				})
			},
			goDetail(item) {
				if(!wx.getStorageSync('wzUid')){
					uni.showToast({
						icon:'none',
						title:'您还未登录，请先登录'
					})
					return
				}
				wx.setStorageSync('wzCaseid',item.caseId)
				uni.navigateTo({
					url: './treatment'
				})
			},
			
			getDas(i,smI) {
				if(!wx.getStorageSync('wzUid')){
					uni.showToast({
						icon:'none',
						title:'您还未登录，请先登录'
					})
					return
				}
				uni.navigateTo({
					url: `./detail?id=${i.caseId}&tid=${smI.treat_id}`
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.sys_case {
		width: calc(100% - 40rpx);
		min-height: calc(100vh - 60rpx);
		padding: 20rpx 20rpx 40rpx;
		background-color: #f6f6f6;

		.noneping {
			width: 100%;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;

			view {
				margin-top: 30rpx;
			}

			image {
				margin-top: 80rpx;
				width: 400rpx;
				height: 400rpx;
			}

			view:first-child {
				color: #999;
				font-size: 24rpx;
				height: 120rpx;
				background-color: #fff;
				border-radius: 16rpx;

			}
		}

		.list-box {
			width: 100%;
			margin: 20rpx auto 0;
			font-size: 28rpx;

			.views {
				margin: 0 auto 40rpx;
				position: relative;
				width: calc(96%);
				padding-bottom: 20rpx;
				min-height: 160rpx;
				border: 1rpx solid #CBE8E6;
				border-radius: 15rpx;
			
				.listM3 {
					position: relative;
					width: calc(100% - 40rpx);
					height: 30px;
					padding: 0 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					view{
						position: relative;
						z-index: 100;
					}
					view:first-child {
						font-size: 32rpx;
					}
					view:last-child {
						color: #Fff;
						.image {
							margin-left: 10rpx;
							width: 15rpx;
							height: 20rpx;
						}
					}
					.imas{
						position: absolute;
						top: -50rpx;
						left: -6rpx;
						height: 80px;
						width: calc(100% + 10rpx);
						z-index: 0;
					}
				}
			
				.BgM4 {
					margin: 50rpx auto 0;
					background-color: #fff;
					width: calc(100% - 40rpx);
					border-radius: 8px;
			
					.listM4 {
						width: calc(100% - 80rpx);
						height: 72px;
						border-radius: 8px 8px 0px 0px;
						opacity: 1;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 40rpx;
						border-bottom: 1rpx solid #F3F3F3;
			
						.M4List {
							width: 80%;
			
							view:last-child {
								color: #9F9F9F;
								font-size: 28rpx;
								margin-top: 10rpx;
							}
						}
			
						image {
							width: 15rpx;
							height: 20rpx;
						}
					}
				}
			
			}
		}




	}
</style>